<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简易网页时钟</title>
    <style type="text/css">
        body,div{margin:0;padding:0;}
        body{color:#fff;font:16px/1.5 \5fae\8f6f\96c5\9ed1;}
        #clock{width:300px;text-align:center;background:#1a1a1a;margin:10px auto;padding:20px 0;}
        span{color:#000;width:80px;line-height:2;background:#fbfbfb;border:2px solid #b4b4b4;margin:0 10px;padding:0 10px;}

    </style>
</head>
<body>
<div id="clock">
    <span>1</span>点
    <span>1</span>分
    <span>1</span>秒
</div>
<script type="text/javascript">
    window.onload = function(){
        var spans = document.getElementById("clock").getElementsByTagName("span");

        //第一种方式,直接创建对象，获取时分秒，赋值即可
        //function getTime(){
        // var now = new Date();
        // spans[0].innerHTML = now.getHours();
        // spans[1].innerHTML = now.getMinutes();
        // spans[2].innerHTML = now.getSeconds();
        //}
        //setInterval(getTime,1000);
        function getTime(){
            var now = new Date();
            var aList = [now.getHours(),now.getMinutes(),now.getSeconds()];
            for(p in aList)spans[p].innerHTML = format(aList[p]);
        }
        getTime();
        setInterval(getTime,1000);
        function format(a){
            return a.toString().replace(/^(\d)$/,"0$1");
        }
    }
</script>
</body>
</html>